<template>
  <div class="y-nav">
    <el-form ref="ruleForm" :rules="rules" :model="ruleForm">
      <div class="l-addrygl">
        <!-- 返回 -->
        <div class="l-addrygl-1">
          <div></div>
          <div class="l-addrygl-back" @click="back()">返回</div>
          <div class="head-span">新增设备</div>
        </div>
        <div class="l-addrygl-2">
          <div class="l-addrygl-2-1">环境监测设备信息</div>
          <!-- input框 -->
          <div class="l-addrygl-2-2">
            <!-- 第一行 -->
            <el-row>
              <el-col :span="6">
                <el-form-item label="设备名称：" prop="equipment_name">
                  <el-input v-model="ruleForm.equipment_name" class="padding"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="设备编号：" prop="equipment_code">
                  <el-input v-model="ruleForm.equipment_code" class="padding"></el-input>
                </el-form-item>
              </el-col>
               <el-col :span="6">
                <el-form-item label="操作人员：" prop="people_id">
                  <el-input v-model="ruleForm.people_id" class="padding"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="ip地址：" prop="equipment_ip">
                  <el-input v-model="ruleForm.equipment_ip" class="padding"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 第二行 -->
            <el-row>
              <el-col :span="6">
                <el-form-item label="品牌名称：" prop="equipment_brand">
                  <el-input v-model="ruleForm.equipment_brand" class="padding"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="安装时间：" prop="equipment_install">
                  <el-date-picker
                    v-model="ruleForm.equipment_install"
                    type="date"
                    placeholder="选择日期"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="安装位置：" prop="equipment_addr">
                  <el-input v-model="ruleForm.equipment_addr" class="padding"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item prop="equipment_status">
                  <div>设备状态：</div>
                  <el-select
                    v-model="ruleForm.equipment_status"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in linput1"
                      :key="item.index"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 第三行 -->
            <el-row>
              <el-col :span="6">
                <el-form-item label="开机时间：" prop="equipment_start">
                  <el-date-picker
                    v-model="ruleForm.equipment_start"
                    type="date"
                    placeholder="选择日期"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="项目平面图位置：" prop="equipment_xy">
                  <el-input v-model="ruleForm.equipment_xy" class="padding"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <!-- 详细信息 部分-->
        <div class="l-addrygl">
          <div class="l-addrygl-2">
            <div class="l-addrygl-2-1">设备详细信息</div>
            <!-- input框 -->
            <div class="l-addrygl-2-2">
              <!-- 第一行 -->
              <el-row>
                <el-col :span="6">
                  <el-form-item label="风速预警值	:" prop="buildWeather.weather_wind_warning">
                    <el-input
                    class="padding"
                      v-model="ruleForm.buildWeather.weather_wind_warning"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="PM2.5预警值" prop="buildWeather.weather_pm_warning">
                    <el-input
                    class="padding"
                      v-model="ruleForm.buildWeather.weather_pm_warning"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item
                    label="噪音预警值:"
                    prop="buildWeather.weather_noise_warning"
                  >
                    <el-input
                    class="padding"
                      v-model="ruleForm.buildWeather.weather_noise_warning"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item
                    label="PM10预警值:"
                    prop="buildWeather.weather_pmten_warning"
                  >
                    <el-input
                    class="padding"
                      v-model="ruleForm.buildWeather.weather_pmten_warning"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="监控画面路径	:" prop="buildWeather.weather_url">
                    <el-input
                    class="padding"
                      v-model="ruleForm.buildWeather.weather_url"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <div class="y-btn">
                <el-form-item>
                  <el-button class="btn-1" type="primary" @click="submitForm('ruleForm')"
                    >提交</el-button
                  >
                  <el-button class="btn-2" @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
              </div>
            </div>
          </div>
        </div>
    </el-form>
  </div>
</template>
<script>
import http from "../api";
// import axios from "axios";
export default {
  data() {
    return {
      //单位名称
      linput2: [], //职务

      //设备状态
      linput1: [
        {
          value: 0,
          label: "开机",
        },
        {
          value: 1,
          label: "关闭",
        },
      ],
      // 设备类型id：
      options1: [
        {
          value: 1,
          label: "门禁设备",
        },
        {
          value: 2,
          label: "塔吊设备",
        },
        {
          value: 3,
          label: "监控设备",
        },
        {
          value: 4,
          label: "电表设备",
        },
        {
          value: 5,
          label: "环境监测设备",
        },
        {
          value: 6,
          label: "车辆监测设备",
        },
        {
          value: 7,
          label: "基坑监测设备",
        },
      ],

      currentRow: null,

      ruleForm: {
        //新增设备
        equipment_name: "", //设备名称
        equipment_code: "", //设备编号
        equipment_id: "", //设备id
        equipment_ip: "", //ip地址
        equipment_type_id: "5", //设备类型
        equipment_brand: "", //品牌名称
        equipment_install: "", //安装时间
        equipment_addr: "", //安装位置
        equipment_status: "", //设备状态
        equipment_start: "", //开机时间
        equipment_xy: "", //平面图位置
        people_id: "", //操作人员
        //详细信息
        buildWeather: {
          weather_wind_warning: "", //风速预警值
          weather_pm_warning: "", //PM2.5预警值
          weather_noise_warning: "", //噪音预警值
          weather_pmten_warning: "", //PM10预警值
          weather_url: "", //监控画面路径
        },
      },

      // 表单验证规则
      rules: {
        equipment_name: [
          { required: true, message: "请输入设备名称", trigger: "blur" },
        ],
        equipment_code: [
          { required: true, message: "请输入设备编号", trigger: "blur" },
        ],
        equipment_ip: [
          { required: true, message: "请输入ip地址", trigger: "blur" },
        ],
        equipment_type_id: [
          { required: true, message: "请输入设备类型", trigger: "blur" },
        ],
        equipment_brand: [
          { required: true, message: "请输入品牌名称", trigger: "blur" },
        ],
        equipment_install: [
          { required: true, message: "请选择安装时间", trigger: "change" },
        ],
         equipment_addr: [
          { required: true, message: "请输入安装位置", trigger: "blur" },
        ],
        equipment_status: [
          { required: true, message: "请选择设备状态", trigger: "change" },
        ],
        equipment_start: [
          { required: true, message: "请选择开机时间", trigger: "change" },
        ],
        equipment_xy: [
          { required: true, message: "请输入项目平面图位置", trigger: "change" },
        ],
     
      //  详细信息部分
      'buildWeather.weather_wind_warning': [
          { required: true, message: "请输入风速预警值", trigger: "blur" },
        ],
        'buildWeather.weather_pm_warning': [
          { required: true, message: "请输入预警值", trigger: "change" },
        ],
       'buildWeather.weather_noise_warning': [
          { required: true, message: "请输入噪音预警值", trigger: "change" },
        ],
       'buildWeather.weather_pmten_warning': [
          { required: true, message: "请输入预警值", trigger: "change" },
        ],
        'buildWeather.weather_url': [
          { required: true, message: "请输入监控画面路径", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    // 返回
    back() {
      this.$router.push({
        name: "环境监测",
      });
    },
        //重置按钮
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    // 提交新增
    submitForm(ruleForm) {
      console.log(this.ruleForm);
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          http.douadd(this.ruleForm).then((res) => {
            console.log("新增", res);
          });
          this.$router.push({
            name: "环境监测",
          });
        } else {
          return false;
        }
      });
    },
  },
  mounted() {
    console.log(this.ruleForm);
  },
};
</script>
<style scoped>
.padding >>> .el-input__inner {
  width: 178px;
  height: 30px;
  padding-left: 5px !important;
}
.el-select >>> .el-input__inner {
  width: 178px;
  height: 30px;
  padding-left: 5px;
  /* margin-left: 5px; */
}

/* .el-input >>> .el-input__inner {
  width: 239px !important;
  height: 30px;
}
.el-select >>> .el-input__inner {
  width: 239px !important;
  height: 30px;
} */

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 239px;
}

/* 最外层 */
.y-nav {
  width: 100%;
  height: 657px;
  overflow-y: scroll;
}
/* 最二层高度 */
.l-addrygl {
  margin-top: 20px;
  margin-left: 20px;
  /* width: 1200px; */
  height: 450px;
  background: #f1f1f1;
}
/* 返回和新增最外div */
.l-addrygl-1 {
  /* position: fixed;
  top: 0; */
  font-size: 17px;
  color: #787878;
  width: 100%;
  height: 61px;
  background: white;
  display: flex;
  /* position: relative;  */
  justify-content: left;
  align-items: center;
}
/* 返回 */
.l-addrygl-back {
  cursor: pointer;
  margin-left: 10px;
}
/*nav导航新增设备  */
.head-span {
  font-size: 17px;
  color: #222;
  font-weight: 700;
  margin-left: 20px;
}
/* 第一层高度 */
.l-addrygl-2 {
  width: 100%;
  height: 360px;
  background: white;
  margin-top: 20px;
  padding-left: 20px;
  position: relative;
}
/* 设备详细信息 */
.l-addrygl-2-1 {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  border-bottom: 1px solid #f2f2f2;
  font-size: 17px;
  color: #222;
  font-weight: 700;
}

/* 提交和重置按按钮 */
.y-btn {
  position: absolute;
  top: 200px;
  right: 50px;
}
/* 提交重置按钮 */
.btn-1 {
  width: 80px;
  height: 30px;
  line-height: 6px;
}
.btn-2 {
  width: 80px;
  height: 30px;
  line-height: 6px;
}
</style>